import axios from "axios";
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import './style.css'
import { fetchList } from "../../store/modules/list/listActions";
import { useNavigate } from "react-router-dom";
import ListItem from '../../components/listItem'
import { Search } from 'react-vant'

const Index = () => {
  const list = useSelector((state) => state.listReducer.list);
  const dispatch = useDispatch();
  const navigate = useNavigate()

  useEffect(() => {
    dispatch(fetchList())
  }, []);

  return (
    <div>
      <Search onFocus={() => navigate('/search')}></Search>
      <div className="list">
        {list.map((v, i) => {
          return (
            <ListItem key={i} v={v} onClick={() => navigate('/detail/' + v.id)}></ListItem>
          );
        })}
      </div>
    </div>
  );
};

export default Index;
